<template>
	<view class="u-p-40 u-font-28">
		<view class=" " @click="areashow=true">
			<view class="flex-between u-m-tb-22 ">
				<text>小区</text>
				<view class="flex-between">
					<text>{{areavalue}}</text>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view>
		

		

		<view class=" " @click="bulideshow=true">
			<view class="flex-between u-m-tb-22 ">
				<text>楼栋单元</text>
				<view class="flex-between">
					<text>{{building_id}}楼</text>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view>
		
		<view class=" " @click="dyshow=true">
			<view class="flex-between u-m-tb-22 ">
				<text>楼层房号</text>
				<view class="flex-between">
					<text>{{room_name}}</text>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view>

		<!-- <view class=" " @click="storeyshow=true">
			<view class="flex-between u-m-tb-22 ">
				<text>楼层</text>
				<view class="flex-between">
					<text>{{storey_id}}楼层</text>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view> -->

		<!-- <view class=" " v-if="role_id!=1">
			<view class="flex-between u-m-tb-22 ">
				<text>房号</text>
				<input type="text" placeholder="请输入房号" v-model="room_number" style="text-align: right;" />
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view> -->
		<view class="" @click="typeshow=true">
			<view class="flex-between  ">
				<text>类型</text>
				<view class="flex-between">
					<text>{{rolevalue}}</text>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view>
		<view class=" ">
			<view class="flex-between u-m-tb-22 ">
				<text>权限</text>
				<view class="flex-center">
					<text class="u-m-r-20">全选</text>
					<u-checkbox-group>
						<u-checkbox @change='changeall'></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
			<u-line margin='20rpx 0'></u-line>
		</view>
		<view class="flex" style="width: 100vw;">
			<view class="" style="width: 50%;">
				<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange1">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
						:label="item.name" :name="item.name">
					</u-checkbox>
				</u-checkbox-group>
			</view>

			<u-checkbox-group v-model="checkboxValue2" placement="column" @change="checkboxChange2">
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList2" :key="index"
					:label="item.name" :name="item.name">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="flex-center u-m-tb-64" @click="tosq">
			<view class="role u-radius-10">
				生成
			</view>
		</view>

		<u-picker @confirm="confirm1"  @close='typeshow=false' keyName="name" @cancel='typeshow=false'
			:closeOnClickOverlay='true' :show="typeshow" :columns="typecolumns"></u-picker>
		<u-picker @confirm="confirm2" @close='areashow=false' keyName="name" @cancel='areashow=false'
			:closeOnClickOverlay='true' :show="areashow" :columns="areacolumns"></u-picker>
		<u-picker @confirm="confirm3" @close='bulideshow=false' @cancel='bulideshow=false' :closeOnClickOverlay='true'
			:show="bulideshow" :columns="buildecolumns"></u-picker>
		<u-picker @confirm="confirm4" @close='dyshow=false' @cancel='dyshow=false'  keyName='room_name':closeOnClickOverlay='true'
			:show="dyshow" :columns="dycolumns"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeshow: false,
				areashow: false,
				bulideshow:false,
				dyshow: false,

				typecolumns: [],
				areacolumns: [],
				buildecolumns: [],
				dycolumns: [],
				storeycolums:[],
				checkboxValue1: [],
				checkboxValue2: [],
				// 基本案列数据
				checkboxList1: [{
						name: '人脸管理',
						id: 1,
						disabled: false
					},
					{
						name: '开门密码',
						id: 2,
						disabled: false
					},
					{
						name: '用户管理',
						id: 3,
						disabled: false
					}
				],
				checkboxList2: [{
						name: '一键操作',
						id: 4,
						disabled: false
					},
					{
						name: '监控',
						id: 5,
						disabled: false
					},

				],
				area_id: 0,
				building_id: 0,
				unit_id: 0,
				storey_id:0,
				rolevalue: '',
				role_id: '',
				areavalue: '',
				room_number:'',
				room_name:''
			}; 
		},
		async onLoad() {
			await this.getarea_list()
		},
		methods: {
			//小区数据
			getarea_list() {
				this.$api.get('/user_house/area_list').then(res => {
					this.areacolumns = [res.data.area_list]
					// this.role_id = res.data.role_list[0].role_id
					this.areavalue = res.data.area_list[0].name
					this.area_id = res.data.area_list[0].id
					// this.rolevalue = res.data.role_list[0].name
					this.getbuilding_list()
				})
			},
			//类型数据
			getrole_list() {
				this.$api.get('/user_house/role_list',{
					area_id:this.area_id,
					room_id:this.unit_id
				}).then(res => {
					this.typecolumns = [res.data.role_list]
					this.role_id = res.data.role_list[0].role_id
					this.rolevalue = res.data.role_list[0].name
				})
			},
			//楼栋数据{{zhiqtech}}/api/user_house/building_list
			getbuilding_list() {
				this.$api.get('/user_house/building_list', {
					area_id: this.area_id
				}).then(res => {
					this.buildecolumns = [res.data.building]
					this.building_id = res.data.building[0]
					this.getunit_list()
				})
			},
			//单元数据{{zhiqtech}}/api/user_house/unit_list
			getunit_list() {
				this.$api.get('/user_house/unit_list', {
					area_id: this.area_id,
					building_id: this.building_id
				}).then(res => {
					this.dycolumns = [res.data.room_info]
					this.unit_id = res.data.room_info[0].room_id
					this.room_name = res.data.room_info[0].room_name
					this.getrole_list()
				})
			},
			
			confirm1(e) {
				console.log(e);
				this.rolevalue = e.value[0].name
				this.role_id = e.value[0].role_id
				this.typeshow = false
			},
			confirm2(e) {
				this.areavalue = e.value[0].name
				this.area_id = e.value[0].id
				this.areashow = false
				this.getbuilding_list()
			},
			confirm3(e) {
				console.log(e);
				this.building_id=e.value[0]
				this.bulideshow = false
				this.getunit_list()
			},
			confirm4(e) {
				console.log(e);
				this.unit_id=e.value[0].room_id
				this.dyshow = false
				this.room_name = e.value[0].room_name
			
			},
			confirm5(e) {
				console.log(e);
				this.storey_id=e.value[0]
				this.storeyshow = false
			},
			
			changeall(e) {
				console.log(e);
				if (e === false) {
					this.checkboxValue1 = []
					this.checkboxValue2 = []
				} else {
					this.checkboxValue1 = ['人脸管理', '开门密码', '用户管理']
					this.checkboxValue2 = ['一键操作', '监控']
				}
			},
			tosq() {
			
				if(!this.unit_id&&this.role_id!=1){
					return this.$toast('请输入房间号')
				}
				if(this.checkboxValue1.length +this.checkboxValue2.length==0 ){
					return this.$toast('最低选择一项~')
				}
				
				this.$api.post('/user_house/add',{
					form:{
						role_id:this.role_id,
						area_id:this.area_id,
						building_id:this.building_id,
						room_id:this.unit_id,

						face_status:this.checkboxValue1.includes('人脸管理')?1:0,
						open_password_status:this.checkboxValue1.includes('开门密码')?1:0,
						user_manage_status:this.checkboxValue1.includes('用户管理')?1:0,
						easy_status:this.checkboxValue2.includes('一键操作')?1:0,
						monitor_status:this.checkboxValue2.includes('监控')?1:0,
					}
				}).then(res=>{
					uni.navigateTo({
						url: '/pages/AuthorizationInformation/AuthorizationInformation?id=' + res.data.id,
					})
				})
				
			},
			checkboxChange1(e) {
				console.log(e);
			},
			checkboxChange2(e) {
				console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.role {
		background-color: #E2F2FF;
		padding: 8px 78px;
		color: #409EFF;
	}
</style>